<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avatar_box">
				<img
					src="../assets/logo.png"
					alt=""
				>
			</div>

			<!-- 登陆表单区域 -->
			<el-form
				ref="loginFormRef"
				:model="loginForm"
				:rules="loginFormRules"
				label-width="0px"
				class="login_form"
			>
				<!-- 用户名 -->
				<el-form-item prop="id">
					<el-input
						v-model="loginForm.id"
						prefix-icon="el-icon-s-custom"
					></el-input>
				</el-form-item>

				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input
						type="password"
						v-model="loginForm.password"
						prefix-icon="el-icon-s-cooperation"
					></el-input>
				</el-form-item>

				<!-- 按钮区 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button
						type="info"
						@click="resetLoginForm"
					>重置</el-button>
				</el-form-item>

			</el-form>
		</div>
	</div>
</template>

<script>
export default {
    data(){
        return{
            // 登陆表单数据的绑定对象
            loginForm: {
                id: '',
                password: '',
            },
            // 这是表单的验证规则对象
            loginFormRules: {
                // 验证用户名是否合法
                id: [
                    { required: true, message: "请输入学号", trigger: "blur" },
                ],
                // 验证密码是否合法
                password: [
                    { required: true, message: "请输入登陆密码", trigger: "blur" },
                ],
            }
        }
    },
    methods: {
        // 点击重置按钮，重置登录表单
        resetLoginForm(){
            // console.log(this)
            this.$refs.loginFormRef.resetFields();
        },
		login(){
			this.$refs.loginFormRef.validate(async valid => {
				if (!valid) return;
				// const result = await this.$http.post("login",this.loginForm);
				// console.log(result)
				const {data:res} = await this.$http.post("login",this.loginForm);
				console.log(res)
				if (res.status == 200){
					this.$message.success("登陆成功！");
					// 1 保存token到客户端的 sessionStorage 中
					// 	项目中除了登录之外的其他api接口，必须在登录之后才能访问
					//  token之应该在当前网站打开期间生效，所以将 token 保存在sessionStorae中
					window.sessionStorage.setItem("token", res.token);

					// 2 通过编程式导航跳转到后台主页，路由地址是  /home
					this.$router.push("/home");
					
				}else{
					this.$message.error("用户名或密码错误！");
				}
			})
		}
    },

};
</script>

<style scoped>
.login_container {
	background-color: #2b4b6b;
	height: 100%;
}

.login_box {
	width: 450px;
	height: 300px;
	background-color: #fff;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.avatar_box {
	height: 130px;
	width: 130px;
	border: 1px solid #eee;
	border-radius: 50%;
	padding: 10px;
	box-shadow: 0 0 10px #ddd;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
}
.avatar_box img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #eee;
}

.btns {
	display: flex;
	justify-content: flex-end;
}

.login_form {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}
</style>